import { rootState } from "@/store";
import { scrollanimate } from "@/utils";
import React, { useState, useEffect, useRef } from "react";
import { useSelector } from "react-redux";
import BIRDS from "vanta/dist/vanta.birds.min";
import Animatewrap from "./index.module.less";

const Animate = () => {
  const [vantaEffect, setVantaEffect] = useState<{
    destroy: () => void;
  } | null>(null);
  const myRef = useRef(null);
  const tomain = () => {
    scrollanimate(document.documentElement, 800, 20);
  };
  const { theme } = useSelector((store: rootState) => ({
    theme: store.home.essaypretheme,
  }));
  useEffect(() => {
    setVantaEffect(
      BIRDS({
        el: myRef.current,
        backgroundColor: theme === "light" ? 0xffffff : 0x0,
        quantity: 4,
      })
    );
    return () => {
      if (vantaEffect) vantaEffect.destroy();
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [theme]);
  return (
    <div ref={myRef} className={Animatewrap.homepageanimatewrap}>
      欢迎来到博客
      <button onClick={tomain}>进入主页</button>
    </div>
  );
};

export default Animate;
